<template>
  <div class="main-page">
    <div class="page-title">
      <span>房产供需分析-模拟测算</span>
      <div class="top-tab">
        <div class="top-tab-left">
          <div class="top-tab-left-item" v-for="(item, index) in ['统计', '分析']" :key="index" @click="goOtherPage(item)">{{ item }}</div>
        </div>
        <div class="top-tab-right">
          <div class="top-tab-right-item">模拟测算</div>
          <span>{{ currentYearMonthDay }}</span>
        </div>
      </div>
    </div>
    <div class="main-content">
      <el-row :gutter="30" style="height: calc(100vh - 102px)">
        <el-col :span="9">
          <div class="house-property-project-sales-trend-forecast">
            <div class="main-content-gird-title">
              <img class="main-content-gird-title-logo"
                   src="@/assets/img/housePropertyAnalysis/statistics/module-title-logo.png"
                   alt=""/>
              <p>房地产项目销售走势预测</p>
            </div>
            <div class="module-title-content-middle-line"></div>
            <div class="house-property-project-sales-trend-forecast-tabs public-tabs">
              <el-tabs v-model="currentHousePropertyProjectSalesTrendForecastTab"
                       @tab-change="changeHousePropertyProjectSalesTrendForecastTab">
                <el-tab-pane v-for="(item, index) of housePropertyProjectSalesTrendForecastTabs" :key="item.id"
                             :label="item.label"
                             :name="item.id"></el-tab-pane>
              </el-tabs>
            </div>
            <el-row :gutter="10" style="margin-top: 10px;">
              <el-col :span="12">
                <div class="house-property-project-sales-trend">
                  <div class="pubilc-chart-title">房地产项目销售走势</div>
                  <line-sales-trend-forecast
                    v-if="housePropertyProjectSalesTrendData.xAxisData?.length"
                    ref="housePropertyProjectSalesTrend"
                    :lineData="housePropertyProjectSalesTrendData"
                    class="h160"
                    @click="fullSc('lineSalesTrendForecast', housePropertyProjectSalesTrendData)"
                  ></line-sales-trend-forecast>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="house-property-project-sales-factor-importance">
                  <div class="pubilc-chart-title">房地产项目销售因子重要程度</div>
                  <bar-factor-importance
                      v-if="salesFactorImportanceData.yAxisData?.length"
                      ref="salesFactorImportance"
                      :barData="salesFactorImportanceData"
                      class="h160"
                      @click="fullSc('barFactorImportance', salesFactorImportanceData)"
                  ></bar-factor-importance>
                </div>
              </el-col>
            </el-row>
          </div>
          <div class="project-recommend">
            <div class="main-content-gird-title">
              <img class="main-content-gird-title-logo"
                   src="@/assets/img/housePropertyAnalysis/statistics/module-title-logo.png"
                   alt=""/>
              <p>项目推荐</p>
            </div>
            <div class="module-title-content-middle-line"></div>
            <div class="project-recommend-filtrate">
              <el-form :model="projectRecommendForm" label-position="left">
                <el-form-item label="交通">
                  <el-cascader
                      class="multiple-select project-recommend-filtrate-traffic-cascader"
                      popper-class="cascader-public-popper"
                      v-model="projectRecommendForm.traffic"
                      :options="projectRecommendForm.trafficOptions"
                      :props="{ multiple: true }"
                      collapse-tags
                      collapse-tags-tooltip
                      clearable
                      size="small"
                      @change="changeCascader($event, 'traffic')"
                  />
                  <div class="accord-condition-type">
                    <span>满足</span>
                    <el-select
                        v-model="projectRecommendForm.accordCondition"
                        size="small"
                        placeholder="请选择"
                    >
                      <el-option
                          v-for="item in [
                              {
                                id: 1,
                                value: 1,
                                label: '任一条件'
                              },
                              {
                                id: 2,
                                value: 2,
                                label: '所有条件'
                              },
                          ]"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                          class="custom-select-option"
                      />
                    </el-select>
                  </div>
                </el-form-item>
                <el-form-item label="学区">
                  <el-cascader
                      class="multiple-select project-recommend-filtrate-school-cascader"
                      popper-class="cascader-public-popper"
                      v-model="projectRecommendForm.school"
                      :options="projectRecommendForm.schoolOptions"
                      :props="{ multiple: true }"
                      collapse-tags
                      collapse-tags-tooltip
                      clearable
                      size="small"
                      @change="changeCascader($event, 'school')"
                  />
                </el-form-item>
                <el-form-item label="区位条件">
                  <el-cascader
                      class="multiple-select project-recommend-filtrate-location-cascader"
                      popper-class="cascader-public-popper"
                      v-model="projectRecommendForm.location"
                      :options="projectRecommendForm.locationOptions"
                      :props="{ multiple: true }"
                      collapse-tags
                      collapse-tags-tooltip
                      clearable
                      size="small"
                      @change="changeCascader($event, 'location')"
                  />
                </el-form-item>
                <el-form-item label="更多">
                  <el-cascader
                      class="multiple-select project-recommend-filtrate-more-cascader"
                      popper-class="cascader-public-popper"
                      v-model="projectRecommendForm.more"
                      :options="projectRecommendForm.moreOptions"
                      :props="{ multiple: true }"
                      collapse-tags
                      collapse-tags-tooltip
                      clearable
                      size="small"
                      @change="changeCascader($event, 'more')"
                  />
                </el-form-item>
                <el-form-item class="multiple-condition-list" label="推荐条件">
                  <div class="multiple-condition-list-item"
                       v-for="(item, index) of projectRecommendForm.recommendationConditionsList" :key="index">
                    <el-slider v-model="item.rangeValue" range :disabled="!item.conditionValue"
                               size="small" :min="item.min" :max="item.max"/>
                    <div class="slider-range-input">
                      <el-input type="number" v-model="item.rangeValue[0]" placeholder="请输入" :minlength="item.min"
                                :maxlength="item.rangeValue[1] ? item.rangeValue[1] - 1 : item.max - 1"/>
                      <span>&nbsp;~&nbsp;</span>
                      <el-input type="number" v-model="item.rangeValue[1]" placeholder="请输入"
                                :minlength="item.rangeValue[0] ? item.rangeValue[0] + 1 : item.min + 1"
                                :maxlength="item.max"/>
                      <span>{{ item.unit }}</span>
                    </div>
                  </div>
                </el-form-item>
                <el-form-item label=" " class="btns-form-item">
                  <el-button type="primary" @click="projectRecommendFiltrateonSubmit($event, {pageNum: 1, pageSize: 10})">开始推荐</el-button>
                </el-form-item>
              </el-form>
            </div>
            <div class="pubilc-chart-title">推荐列表</div>
            <div class="recommend-table-list-module">
              <recommend-table-list :tableData="recommendTableListData" :tablePaginationInfo="recommendTableInfo"
                                    :columnData="recommendColumnData"></recommend-table-list>
            </div>
          </div>
        </el-col>
        <el-col :span="6" style="position: relative; padding: 0">
          <div class="middle-map">
            <map-box
                :listData="mapList"
                :mapConfig="{layoutSize: '105%'}"
                @mapNameChange="mapNameChange"
            ></map-box>
            <div class="map-address">辽宁省{{ cityObj.name ? `-${cityObj.name}` : '' }}</div>
          </div>
          <div class="forecast-simulation-analysis">
            <div class="main-content-gird-title">
              <img class="main-content-gird-title-logo"
                   src="@/assets/img/housePropertyAnalysis/statistics/module-title-logo.png"
                   alt=""/>
              <p>预测模拟分析</p>
            </div>
            <el-date-picker
              class="forecast-simulation-analysis-date-picker"
              popper-class="forecast-simulation-analysis-date-picker-popper"
              v-model="forecastSimulationAnalysisTimeFiltrate"
              type="monthrange"
              range-separator="至"
              format="YYYY-MM"
              value-format="YYYY-MM"
              start-placeholder="起始月"
              end-placeholder="结束月"
              :clearable="false"
              :disabled-date="monthPickerDisabledOptions"
              @change="changeForecastSimulationAnalysisTimeFiltrate"
            />
            <div class="module-title-content-middle-line"></div>
            <div class="forecast-simulation-analysis-main-content">
              <el-form :model="forecastSimulationAnalysisForm" label-position="left" style="overflow-y: auto">
                <el-form-item label="选择地区">
                  <el-select
                      class="multiple-select"
                      v-model="forecastSimulationAnalysisForm.area"
                      multiple
                      collapse-tags
                      collapse-tags-tooltip
                      size="small"
                      placeholder="请选择"
                  >
                    <el-option
                        v-for="item in areaOptions"
                        :key="item.regionCode"
                        :label="item.regionName"
                        :value="item.regionCode"
                        class="custom-select-option"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item class="multiple-condition-list" label="调控因子">
                  <div class="multiple-condition-list-item"
                       v-for="(item, index) of forecastSimulationAnalysisForm.regulatoryFactorConditionsList" :key="index">
                    <el-icon class="multiple-condition-list-item-delete" v-if="index !== 0"
                             @click="deleteRegulatoryFactorCondition(item, index)">
                      <Delete/>
                    </el-icon>
                    <el-select
                        v-model="item.conditionValue"
                        size="small"
                        placeholder="请选择"
                        @change="regulatoryFactorConditionItemChange(item)"
                    >
                      <el-option
                          v-for="optionItem in regulatoryFactorConditionsSelectList"
                          :key="optionItem.value"
                          :label="optionItem.label"
                          :value="optionItem.value"
                          :disabled="optionItem.disabled"
                          class="custom-select-option"
                      />
                    </el-select>
                    <el-slider v-model="item.rangeValue" range
                               size="small" :min="item.min" :max="item.max"/>
                    <div class="slider-range-input">
                      <el-input type="number" v-model="item.rangeValue[0]" placeholder="请输入" :minlength="item.min"
                                :maxlength="item.rangeValue[1] ? item.rangeValue[1] - 1 : item.max - 1"/>
                      <span>&nbsp;~&nbsp;</span>
                      <el-input type="number" v-model="item.rangeValue[1]" placeholder="请输入"
                                :minlength="item.rangeValue[0] ? item.rangeValue[0] + 1 : item.min + 1"
                                :maxlength="item.max"/>
                      <span>{{ item.unit }}</span>
                    </div>
                  </div>
                </el-form-item>
                <el-form-item label=" " class="btns-form-item">
                  <el-button @click="addRegulatoryFactorCondition">添加因子</el-button>
                  <el-button type="primary" @click="regulatoryFactorOpinionSubmit">查询分析结果</el-button>
                </el-form-item>
              </el-form>
              <div class="forecast-trend-aAfter-regulation">
                <div class="pubilc-chart-title" style="margin-bottom: 10px;">预测调控后走势</div>
                <bar v-if="forecastTrendAfterRegulation?.length" :barData="forecastTrendAfterRegulation"></bar>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="9">
          <div class="policy-impact-analysis">
            <div class="main-content-gird-title">
              <img class="main-content-gird-title-logo"
                   src="@/assets/img/housePropertyAnalysis/statistics/module-title-logo.png"
                   alt=""/>
              <p>政策影响分析</p>
            </div>
            <div class="module-title-content-middle-line"></div>
            <div class="policy-list">
              <div class="pubilc-chart-title">政策列表</div>
              <recommend-table-list :tableData="policyTableListData"
                                    :columnData="policyColumnData" @changeTableDataCheckStatus="changeTableDataCheckStatus"></recommend-table-list>
            </div>
            <div class="policy-impact-analysis-forecast">
              <div class="pubilc-chart-title">政策影响预测</div>
              <div class="policy-impact-analysis-forecast-tabs public-tabs">
                <el-tabs v-model="currentPolicyImpactAnalysisForecastTab"
                         @tab-change="changePolicyImpactAnalysisForecastTab">
                  <el-tab-pane v-for="(item, index) of housePropertyProjectSalesTrendForecastTabs" :key="item.id"
                               :label="item.label"
                               :name="item.id"></el-tab-pane>
                </el-tabs>
              </div>
              <line-policy-impact-forecast
                  v-if="linePolicyImpactForecastData.xAxisData?.length"
                  ref="linePolicyImpactForecastRef"
                  :lineData="linePolicyImpactForecastData"
                  class="h160"
                  @click="fullSc('linePolicyImpactForecast', linePolicyImpactForecastData)"
              ></line-policy-impact-forecast>
              <div style="position: relative">
                <div class="public-tabs policy-impact-analysis-house-property-forecast-tabs">
                  <el-tabs v-model="currentPolicyImpactAnalysisHousePropertyForecastTab"
                           @tab-change="changePolicyImpactAnalysisHousePropertyForecastTab">
                    <el-tab-pane v-for="(item, index) of policyImpactAnalysisHousePropertyForecastTabs" :key="item.id"
                                 :label="item.label"
                                 :name="item.id"></el-tab-pane>
                  </el-tabs>
                </div>
                <el-date-picker
                    class="policy-impact-analysis-house-property-forecast-date-picker"
                    popper-class="policy-impact-analysis-house-property-forecast-date-picker-popper"
                    v-model="housePropertyForecastTimeFiltrate"
                    type="monthrange"
                    range-separator="至"
                    format="YYYY-MM"
                    value-format="YYYY-MM"
                    start-placeholder="起始月"
                    end-placeholder="结束月"
                    :clearable="false"
                    :disabled-date="monthPickerDisabledOptions"
                    @change="changeHousePropertyForecastTimeFiltrate"
                />
              </div>
              <div class="pubilc-chart-title" style="position: relative">
                房地产项目销售预测
                <div class="house-property-project-sales-forecast-tabs public-tabs">
                  <el-tabs v-model="currentHousePropertyProjectSalesForecastTab"
                           @tab-change="changeHousePropertyProjectSalesForecastTab">
                    <el-tab-pane v-for="(item, index) of housePropertyProjectSalesTrendForecastTabs" :key="item.id"
                                 :label="item.label"
                                 :name="item.id"></el-tab-pane>
                  </el-tabs>
                </div>
              </div>
              <bar-house-property-project-forecast
                  v-if="barHousePropertyProjectSalesForecastData.xAxisData.length"
                  ref="barHousePropertyProjectSalesForecastDomRef"
                  :barData="barHousePropertyProjectSalesForecastData"
                  class="h170"
                  @click="fullSc('barHousePropertyProjectForecast', barHousePropertyProjectSalesForecastData)"
              ></bar-house-property-project-forecast>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <el-dialog v-model="magnifyData.dialogVisible" :width="magnifyData.dialogWidth" :top="magnifyData.dialogTop">
      <component
          v-if="magnifyData.dialogVisible"
          ref="dialogRef"
          :is="magnifyData.componentName"
          :dialogData="{fontSizeTimes: 2}"
          v-bind="{...magnifyData.props}"
      ></component>
    </el-dialog>
  </div>
</template>

<script>
import lineSalesTrendForecast from "@/components/housePropertyAnalysis/forecast/lineSalesTrendForecast.vue";
import barFactorImportance from "@/components/housePropertyAnalysis/forecast/barFactorImportance.vue";
import linePolicyImpactForecast from "@/components/housePropertyAnalysis/forecast/linePolicyImpactForecast.vue";
import barHousePropertyProjectForecast from "@/components/housePropertyAnalysis/forecast/barHousePropertyProjectForecast.vue";

export default {
  components: {
    lineSalesTrendForecast,
    barFactorImportance,
    linePolicyImpactForecast,
    barHousePropertyProjectForecast,
  },
};
</script>

<script setup>
import {nextTick, onMounted, ref} from "vue";
import recommendTableList from "@/components/housePropertyAnalysis/forecast/recommendTableList.vue";
import mapBox from "@/components/housePropertyAnalysis/statistics/map.vue";
import bar from "@/components/housePropertyAnalysis/forecast/bar.vue";
import { useRouter } from "vue-router";
import {
  getSupplyDemandGetRegion, // 区域list
} from "@/api/housePropertyAnalysis/analysis";
import {
  getRealEstateAnalyzePolicyImpact, // 政策影响分析-政策列表
  getRealEstateForecastPolicySales, // 政策影响分析-政策影响预测
  getRealEstateAnalyzeImpactForecast, // 政策影响分析-房地产项目销售/价格预测
  getRealEstateForecastSalesTrend, // 房地产项目销售走势预测
  getSchoolList, // 项目推荐-获取学区下拉
  getTraffic, // 项目推荐-获取交通下拉
  getLocational, // 项目推荐-获取区位下拉
  moreInfo, // 项目推荐-获取更多下拉
  selectGisProjectList, // 项目推荐列表
} from "@/api/housePropertyAnalysis/forecast";

const magnifyData = ref({ // chart图放大data
  dialogVisible: false,
  componentName: '',
  componentParams: {},
  dialogWidth: '',
  props: {},
  dialogTop: ''
})

const router = useRouter();

const currentYearMonthDay = ref(null) // 当前年月日
const currentYear = ref(null) // 当前年
const currentMonth = ref(null) // 当前月
const cityObj = ref({
  name: '沈阳市',
  code: '210100'
}) // 地图-市名
const mapList = ref([
  {name: '沈阳市', value: 0, code: '210100', select: { disabled: false }, selected: true, },
  {name: '大连市', value: 0, code: '210200', select: { disabled: true }},
  {name: '鞍山市', value: 0, code: '210300', select: { disabled: true }},
  {name: '抚顺市', value: 0, code: '210400', select: { disabled: true }},
  {name: '本溪市', value: 0, code: '210500', select: { disabled: true }},
  {name: '丹东市', value: 0, code: '210600', select: { disabled: true }},
  {name: '锦州市', value: 0, code: '210700', select: { disabled: true }},
  {name: '营口市', value: 0, code: '210800', select: { disabled: true }},
  {name: '阜新市', value: 0, code: '210900', select: { disabled: true }},
  {name: '辽阳市', value: 0, code: '211000', select: { disabled: true }},
  {name: '盘锦市', value: 0, code: '211100', select: { disabled: true }},
  {name: '铁岭市', value: 0, code: '211200', select: { disabled: true }},
  {name: '朝阳市', value: 0, code: '211300', select: { disabled: true }},
  {name: '葫芦岛市', value: 0, code: '211400', select: { disabled: true }},
])

const currentHousePropertyProjectSalesTrendForecastTab = ref(1) // 当前房地产项目销售走势预测tab
const housePropertyProjectSalesTrendForecastTabs = ref([ // 房地产项目销售走势预测tabs-list
  {
    id: 1,
    label: '销售套数',
    unit: '万套'
  },
  {
    id: 2,
    label: '销售面积',
    unit: '万㎡'
  },
  {
    id: 3,
    label: '销售金额',
    unit: '万元'
  },
  {
    id: 4,
    label: '销售均价',
    unit: '元'
  },
])

const housePropertyProjectSalesTrendData = ref({ // 房地产项目销售走势预测-房地产项目销售走势-data
  xAxisData: [],
  seriesData: [],
  yAxisName: '万套',
  forecastIndex: 0
})
const housePropertyProjectSalesTrend = ref(null) // 房地产项目销售走势预测-房地产项目销售走势-domref

const salesFactorImportanceData = ref({ // 房地产项目销售走势预测-房地产项目销售因子重要程度-data
  yAxisData: [],
  seriesData: []
})
const salesFactorImportance = ref(null) // 房地产项目销售走势预测-房地产项目销售因子重要程度-domref

const projectRecommendForm = ref({ // 项目推荐-筛选-data
  traffic: [], // 交通
  trafficOptions: [], // 交通list
  school: [], // 学区
  schoolOptions: [], // 学区list
  location: [], // 区位
  locationOptions: [], // 区位list
  more: [], // 更多
  moreOptions: [], // 更多list
  accordCondition: 1, // 满足条件类型
  recommendationConditionsList: [ // 推荐条件list
    {
      conditionValue: '单价',
      rangeValue: [0, 50000],
      min: 0,
      max: 50000,
      unit: '元'
    },
    {
      conditionValue: '楼层',
      rangeValue: [0, 50],
      min: 0,
      max: 50,
      unit: '层'
    },
    {
      conditionValue: '面积',
      rangeValue: [0, 500],
      min: 0,
      max: 500,
      unit: '㎡'
    },
  ]
})
const areaOptions = ref([]) // 项目推荐-筛选-区域推荐select-list

const recommendTableListData = ref([]) // 推荐列表tablelist
const recommendColumnData = ref([]) // 推荐列表columnlist
const recommendTableInfo = ref({ // 推荐列表-分页-table信息
  total: 0,
  currentPage: 1
})

const forecastSimulationAnalysisForm = ref({ // 预测模拟分析-调控因子list
  area: [], // 地区
  regulatoryFactorConditionsList: [
    {
      conditionValue: '贷款首付',
      rangeValue: [0, 0],
      min: 0,
      max: 100,
      unit: '%'
    }
  ],
})
const regulatoryFactorConditionsSelectList = ref([ // 预测模拟分析-调控因子select下拉list
  {
    id: 1,
    label: '个人住房贷款最低首付款比例',
    value: '个人住房贷款最低首付款比例',
    disabled: true
  },
  {
    id: 2,
    label: '住房公积金最低缴存基数',
    value: '住房公积金最低缴存基数',
    disabled: false
  },
  {
    id: 3,
    label: '首套住房的利率',
    value: '首套住房的利率',
    disabled: false
  },
  {
    id: 4,
    label: '首套商品住房首付比例',
    value: '首套商品住房首付比例',
    disabled: false
  },
])
const forecastTrendAfterRegulation = ref([]) // 预测模拟分析-预测调控后走势
const forecastSimulationAnalysisTimeFiltrate = ref(null) // 预测模拟分析-月范围筛选
const monthRangeDisabledOption = ref([]) // 预测模拟分析-月范围筛选-禁用配置项

const policyTableListData = ref([]) // 政策列表tablelist
const policyColumnData = ref([]) // 政策列表columnlist
const currentPolicyImpactAnalysisForecastTab = ref(1) // 当前政策影响预测tab
const linePolicyImpactForecastData = ref({ // 政策影响预测Data
  legendData: [],
  xAxisData: [],
  seriesData: [],
  markAreaData: [],
  yAxisName: '万套',
})
const linePolicyImpactForecastRef = ref(null) // 政策影响预测-domref
const currentPolicyImpactAnalysisHousePropertyForecastTab = ref(1) // 政策影响分析-房地产项目预测-当前tab
const policyImpactAnalysisHousePropertyForecastTabs = ref([ // 政策影响分析-房地产项目预测tabs
  {
    id: 1,
    label: '地区',
  },
  {
    id: 2,
    label: '开发商'
  },
  {
    id: 3,
    label: '户型'
  },
  {
    id: 4,
    label: '面积'
  },
])
const currentHousePropertyProjectSalesForecastTab = ref(1) // 政策影响分析-房地产项目销售预测-当前tab
const barHousePropertyProjectSalesForecastData = ref({ // 政策影响分析-房地产项目销售预测-Data
  xAxisData: [],
  seriesData: [],
  yAxisName: '万套',
  yAxisDefaultMaxValue: 200
})
const barHousePropertyProjectSalesForecastDomRef = ref(null) // 政策影响分析-房地产项目销售预测-domref
const housePropertyForecastTimeFiltrate = ref(null) // 房地产项目预测-月范围筛选

const changeHousePropertyProjectSalesTrendForecastTab = (item) => { // 切换当前房地产项目销售走势预测tab
  housePropertyProjectSalesTrendData.value.yAxisName = housePropertyProjectSalesTrendForecastTabs.value.find(x => x.id === item)?.unit
  initHousePropertyProjectSalesTrendAnalysis(cityObj.value.code)
}

const initHousePropertyProjectSalesTrendAnalysis = (cityCode) => { // 房地产项目销售走势预测-总的
  getRealEstateForecastSalesTrend({
    adcode: cityCode,
    requestType: currentHousePropertyProjectSalesTrendForecastTab.value === 4 ? 1 : currentHousePropertyProjectSalesTrendForecastTab.value,
  }).then(res => {
    const resData = res?.data
    if (resData?.months?.length) {
      housePropertyProjectSalesTrendData.value.xAxisData = [0, ...resData?.months]
      const tempXAxisData = housePropertyProjectSalesTrendData.value.xAxisData
      let forecastIndex = 0
      const currentYearMonthDate = new Date(`${currentYear.value}-${currentMonth.value}`).getTime()
      for(let i = 0; i < tempXAxisData?.length; i++) {
        if (new Date(tempXAxisData[i]).getTime() >= currentYearMonthDate) {
          forecastIndex = i
          break;
        }
      }
      housePropertyProjectSalesTrendData.value.forecastIndex = forecastIndex

      housePropertyProjectSalesTrendData.value.seriesData = [
        [0, ...resData?.[currentHousePropertyProjectSalesTrendForecastTab.value === 4 ? 'avgList' : 'salesList']?.map((x, i) => i > forecastIndex ? null : x)],
        [null, ...resData?.[currentHousePropertyProjectSalesTrendForecastTab.value === 4 ? 'avgList' : 'salesList']?.map((x, i) => i < forecastIndex ? null : x)]
      ]

      salesFactorImportanceData.value.yAxisData = []
      salesFactorImportanceData.value.seriesData = []
      resData?.[currentHousePropertyProjectSalesTrendForecastTab.value === 4 ? 'downYzList' : 'topYzList']?.forEach(x => {
        salesFactorImportanceData.value.yAxisData.push(x.name)
        salesFactorImportanceData.value.seriesData.push(x.value)
      })
    }
  }).catch(error => {
    console.log(error);
  }).finally(_ => {
    nextTick(() => {
      housePropertyProjectSalesTrend.value.updateChart();
      salesFactorImportance.value.updateChart();
    })
  })
}

const projectRecommendFiltrateonSubmit = (event, pageInfo = {pageNum: 1, pageSize: 10}) => { // 项目推荐-开始推荐
  initRecommendTableData(cityObj.value.code, pageInfo);
}

const initRecommendTrafficList = () => { // 项目推荐-获取交通list
  getTraffic({}).then((res) => {
    projectRecommendForm.value.trafficOptions = res.data?.map(x => {
      return {
        ...x,
        value: x.label
      }
    });
  })
}

const initRecommendSchoolList = () => { // 项目推荐-获取学区list
  getSchoolList({}).then((res) => {
    projectRecommendForm.value.schoolOptions = res.data?.map(x => {
      return {
        ...x,
        value: x.label
      }
    });
  })
}

const initRecommendLocationList = () => { // 项目推荐-获取区位list
  getLocational({}).then((res) => {
    projectRecommendForm.value.locationOptions = res.data?.map(x => {
      return {
        ...x,
        value: x.label
      }
    });
  })
}

const initRecommendMoreList = () => { // 项目推荐-获取更多list
  moreInfo({}).then((res) => {
    const tempArray = [
      {
        label: '类型',
        key: 'lxList'
      },
      {
        label: '户型',
        key: 'hxList'
      },
      {
        label: '售卖状态',
        key: 'smztList'
      },
      {
        label: '朝向',
        key: 'cxList'
      },
      {
        label: '建筑样式',
        key: 'jzysList'
      }
    ]
    tempArray.forEach(x => {
      projectRecommendForm.value.moreOptions.push({
        label: x.label,
        value: x.label,
        children: res.data?.[x.key]
      })
    })
  })
}

const changeCascader = (event, type) => {
  console.log(event);
}

const initRecommendTableData = (cityCode, pageInfo) => { // 项目推荐-推荐列表
  let apiParams = {}
  apiParams.busList = projectRecommendForm.value.traffic?.filter(x => x[0] === '公交')?.map(y => y?.[1]) || []
  apiParams.subwayList = projectRecommendForm.value.traffic?.filter(x => x[0] === '地铁')?.map(y => y?.[1]) || []
  apiParams.schoolList = projectRecommendForm.value.school?.map(x => x?.[1]) || []
  apiParams.yh = projectRecommendForm.value.location?.find(x => x?.[0] === '一河两岸')?.[0]
  apiParams.threeHospitalsList = projectRecommendForm.value.location?.filter(x => x[0] === '三甲医院')?.map(y => y?.[1]) || []
  apiParams.sqList = projectRecommendForm.value.location?.filter(x => x[0] === '商圈')?.map(y => y?.[1]) || []
  apiParams.lxList = projectRecommendForm.value.more?.filter(x => x[0] === '类型')?.map(y => y?.[1]) || []
  apiParams.hxList = projectRecommendForm.value.more?.filter(x => x[0] === '户型')?.map(y => y?.[1]) || []
  apiParams.smztList = projectRecommendForm.value.more?.filter(x => x[0] === '售卖状态')?.map(y => y?.[1]) || []
  apiParams.cxList = projectRecommendForm.value.more?.filter(x => x[0] === '朝向')?.map(y => y?.[1]) || []
  apiParams.jzysList = projectRecommendForm.value.more?.filter(x => x[0] === '建筑样式')?.map(y => y?.[1]) || []
  apiParams.minPrice = projectRecommendForm.value.recommendationConditionsList[0].rangeValue[0]
  apiParams.maxPrice = projectRecommendForm.value.recommendationConditionsList[0].rangeValue[1]
  apiParams.minLc = projectRecommendForm.value.recommendationConditionsList[1].rangeValue[0]
  apiParams.maxLc = projectRecommendForm.value.recommendationConditionsList[1].rangeValue[1]
  apiParams.minArea = projectRecommendForm.value.recommendationConditionsList[2].rangeValue[0]
  apiParams.maxArea = projectRecommendForm.value.recommendationConditionsList[2].rangeValue[1]
  selectGisProjectList(apiParams).then(res => {
    const resData = res?.data?.projectSortList
    if (resData?.length) {
      recommendColumnData.value = [
        {
          label: '序号',
          key: 'index',
          width: 40
        },
        {
          label: '项目名称',
          key: 'name',
          width: 150
        },
        {
          label: '地区',
          key: 'xzqhmc',
          width: 80
        },
        {
          label: '开发商',
          key: 'kfsmc',
          width: 80
        },
        {
          label: '物业',
          key: 'wy',
          width: 80
        },
        {
          label: '价格范围',
          key: 'wss',
          width: 80
        },
        {
          label: '保值情况',
          key: 'bzqk',
          width: 80
        },
        {
          label: '保值预测',
          key: 'bzyc',
          width: 80
        }
      ]
      recommendTableListData.value = resData?.map((x, i) => {
        return {
          ...x,
          index: (pageInfo.pageNum - 1) * pageInfo.pageSize + (i + 1)
        }
      })
      recommendTableInfo.value.total = resData?.length
      recommendTableInfo.value.currentPage = pageInfo.pageNum
    } else {
      recommendColumnData.value = []
      recommendTableInfo.value.total = resData?.total
      recommendTableInfo.value.currentPage = pageInfo.pageNum
    }
  }).catch(error => {
    console.log(error);
    recommendColumnData.value = []
    recommendTableInfo.value.total = 0
    recommendTableInfo.value.currentPage = 1
  })
}

const mapNameChange = (data) => { // 地图点击触发
  cityObj.value.name = cityObj.value.name == data.cityName ? '' : data.cityName;
  cityObj.value.code = cityObj.value.code == data.cityCode ? '' : data.cityCode;
  console.log(data, cityObj.value);
}

const deleteRegulatoryFactorCondition = (item, index) => { // 预测模拟分析-删除调控因子
  forecastSimulationAnalysisForm.value.regulatoryFactorConditionsList = forecastSimulationAnalysisForm.value.regulatoryFactorConditionsList?.filter((x, i) => i !== index)
  let tempObj = regulatoryFactorConditionsSelectList.value?.find(x => item.conditionValue === x.value)
  tempObj.disabled = !tempObj.disabled
}

const regulatoryFactorConditionItemChange = (item) => { // 预测模拟分析-切换调控因子
  let tempObj = regulatoryFactorConditionsSelectList.value?.find(x => item.conditionValue === x.value)
  tempObj.disabled = !tempObj.disabled
}

const addRegulatoryFactorCondition = () => { // 模拟预测分析-添加条件
  forecastSimulationAnalysisForm.value.regulatoryFactorConditionsList.push(
      {
        conditionValue: '',
        rangeValue: [0, 0],
        min: 0,
        max: 100,
        unit: '%'
      }
  )
}

const initForecastTrendAfterRegulationData = () => { // 预测模拟分析-预测调控后走势
  forecastTrendAfterRegulation.value = [
    {
      label: '销售面积',
      forecast: 0,
      afterRegulation: 1500000,
      sum: 2000000,
      unit: '㎡',
      percentage: 10
    },
    {
      label: '销售均价',
      forecast: 150000,
      afterRegulation: 200000,
      sum: 1000000,
      unit: '￥',
      percentage: 15
    },
    {
      label: '销售套数',
      forecast: 1200000,
      afterRegulation: 3000000,
      sum: 3500000,
      unit: '套',
      percentage: -10
    }
  ]
}

const initPolicyListData = (cityCode) => { // 政策列表
  getRealEstateAnalyzePolicyImpact({adcode: cityCode}).then(async res => {
    const resData = res?.data
    if (resData?.length) {
      policyTableListData.value = resData?.map((x, i) => {
        return {
          id: x.id,
          title: x.zcnr,
          publishTime: x.fbsj,
          policyValidityTime: x.zcsx,
          isChecked: i === 0
        }
      })
      policyColumnData.value = [
        {
          label: '自定义复选框',
          key: 'selfSelection',
          width: 50
        },
        {
          label: '政策',
          key: 'title',
          width: 200
        },
        {
          label: '发布时间',
          key: 'publishTime',
        },
        {
          label: '政策时效',
          key: 'policyValidityTime',
        }
      ]

      const tempPolicyImpactForecastData = await initPolicyImpactForecastData(cityCode, [policyTableListData.value?.[0]?.title]) // 政策影响预测
      initHousePropertyProjecForecastData(cityObj.value.code, [policyTableListData.value?.[0]?.title]) // 房地产项目销售/价格预测
      publicHandlePolicyImpactForecastData(tempPolicyImpactForecastData, policyTableListData.value.slice(0, 1));
    }
  }).catch(error => {
    console.log(error);
  })
}

const initPolicyImpactForecastData = (cityCode, policyList = []) => { // 政策影响预测
  return new Promise(resolve => {
    getRealEstateForecastPolicySales({
      adcode: cityCode,
      requestType: currentPolicyImpactAnalysisForecastTab.value,
      policyList
    }).then(res => {
      const resData = res?.data
      if (resData) {
        resolve(resData)
      } else {
        resolve(false)
      }
    }).catch(error => {
      console.log(error);
      resolve(false)
    })
  })
}

const publicHandlePolicyImpactForecastData = (resData, checkList) => { // 政策影响预测-公共处理方法
  if (resData) {
    linePolicyImpactForecastData.value.markAreaData = []
    linePolicyImpactForecastData.value.xAxisData = [0, ...resData?.dateList]
    linePolicyImpactForecastData.value.legendData = [
      {
        name: '未干预',
        itemStyle: {
          color: '#5ABE52'
        }
      },
      {
        name: '干预',
        itemStyle: {
          color: '#0E81FF'

        }
      }
    ]
    linePolicyImpactForecastData.value.seriesData = [
      [0, ...resData?.gyList],
      [0, ...resData?.ungyList],
    ]
    const tempXAxisData = linePolicyImpactForecastData.value.xAxisData
    let forecastIndex = 0
    const currentYearMonthDate = new Date(`${currentYear.value}-${currentMonth.value}`).getTime()
    for(let i = 0; i < tempXAxisData?.length; i++) {
      if (new Date(tempXAxisData[i]).getTime() >= currentYearMonthDate) {
        forecastIndex = i + 1
        break;
      }
    }
    checkList.forEach((item, index) => {
      if (item.policyValidityTime.indexOf('-') !== -1) {
        const tempTimeRangeArray = item.policyValidityTime.split('-')
        const tempStartTime = tempTimeRangeArray[0].split('.')
        const tempEndTime = tempTimeRangeArray[1].split('.')
        const startTime = `${tempStartTime[0]}-${tempStartTime[1]}`
        const endTime = `${tempEndTime[0]}-${tempEndTime[1]}`
        const startTimeDate = new Date(startTime).getTime();
        const endTimeDate = new Date(endTime).getTime();
        const xAxisStartDate = new Date(tempXAxisData[1]).getTime();
        const xAxisEndDate = new Date(tempXAxisData[tempXAxisData?.length - 1]).getTime();
        linePolicyImpactForecastData.value.markAreaData.push([
          {
            name: item?.title,
            xAxis: startTimeDate < xAxisStartDate ? 0 : startTime
          },
          {
            xAxis: endTimeDate > xAxisEndDate ? tempXAxisData[tempXAxisData?.length - 1] : endTime
          }
        ])
      }
    })
    // if (new Date(tempXAxisData[forecastIndex]).getTime() < new Date(tempXAxisData[tempXAxisData?.length - 1]).getTime())
    linePolicyImpactForecastData.value.markAreaData.push([
      {
        name: '预测',
        xAxis: tempXAxisData[forecastIndex]
      },
      {
        xAxis: tempXAxisData[tempXAxisData?.length - 1]
      }
    ])
  }
}

const initHousePropertyProjecForecastData = (cityCode, policyList) => { // 房地产项目销售/价格预测
  getRealEstateAnalyzeImpactForecast({
    adcode: cityCode,
    requestType: currentPolicyImpactAnalysisHousePropertyForecastTab.value,
    saleType: currentHousePropertyProjectSalesForecastTab.value === 4 ? 1 : currentHousePropertyProjectSalesForecastTab.value,
    startTime: housePropertyForecastTimeFiltrate.value[0],
    endTime: housePropertyForecastTimeFiltrate.value[1],
    policyList
  }).then(res => {
    const resData = res?.data
    if (resData?.topList?.length) {
      barHousePropertyProjectSalesForecastData.value.xAxisData = []
      barHousePropertyProjectSalesForecastData.value.seriesData = [[], []]
      resData?.[currentHousePropertyProjectSalesForecastTab.value === 4 ? 'jjList' : 'topList']?.forEach(x => {
        barHousePropertyProjectSalesForecastData.value.xAxisData.push(x.name)
        barHousePropertyProjectSalesForecastData.value.seriesData[0].push(x?.[currentHousePropertyProjectSalesForecastTab.value === 4 ? 'wgyXsjj' : 'ungySum'])
        barHousePropertyProjectSalesForecastData.value.seriesData[1].push(x?.[currentHousePropertyProjectSalesForecastTab.value === 4 ? 'gyXsjj' : 'gySum'])
      })
    }
  }).catch(error => {
    console.log(error);
  }).finally(_ => {
    barHousePropertyProjectSalesForecastDomRef.value.updateChart()
  })
}

const initAreasList = (cityCode) => { // 获取当前市区list
  getSupplyDemandGetRegion({adcode: cityCode}).then(res => {
    let resData = res?.data
    if (resData?.length) {
      resData.shift();
      areaOptions.value = resData
    }
  }).catch(error => {
    console.log(error);
  })
}

const changeTableDataCheckStatus = async (obj) => { // 政策列表checkbox变动
  if (obj.type === 'all') {
    policyTableListData.value.forEach(x => {
      x.isChecked = obj.value
    })
  } else { // 切换单行选中状态
    let tempRow = policyTableListData.value?.find(x => x.id === obj.id)
    tempRow.isChecked = obj.value
  }
  const tempCheckedPolicyList = policyTableListData.value?.filter(x => x.isChecked)
  const tempCheckedPolicyNameList = tempCheckedPolicyList.map(x => x.title)
  const resData = await initPolicyImpactForecastData(cityObj.value.code, tempCheckedPolicyNameList) // 政策影响预测
  initHousePropertyProjecForecastData(cityObj.value.code, tempCheckedPolicyNameList) // 房地产项目销售/价格预测
  publicHandlePolicyImpactForecastData(resData, tempCheckedPolicyList);
  linePolicyImpactForecastRef.value.updateChart()
}

const changePolicyImpactAnalysisForecastTab = async (val) => { // 政策影响预测-tab切换
  const tempCheckedPolicyList = policyTableListData.value?.filter(x => x.isChecked)
  const tempCheckedPolicyNameList = tempCheckedPolicyList.map(x => x.title)
  linePolicyImpactForecastData.value.yAxisName = housePropertyProjectSalesTrendForecastTabs.value.find(x => x.id === val)?.unit
  const resData = await initPolicyImpactForecastData(cityObj.value.code, tempCheckedPolicyNameList) // 政策影响预测
  publicHandlePolicyImpactForecastData(resData, tempCheckedPolicyList);
  linePolicyImpactForecastRef.value.updateChart()
}

const changePolicyImpactAnalysisHousePropertyForecastTab = (val) => { // 政策影响预测-房地产项目预测-tab切换
  const tempCheckedPolicyNameList = policyTableListData.value?.filter(x => x.isChecked)?.map(x => x.title)
  initHousePropertyProjecForecastData(cityObj.value.code, tempCheckedPolicyNameList) // 房地产项目预测
}

const changeHousePropertyProjectSalesForecastTab = (val) => { // 政策影响预测-房地产项目销售预测-tab切换
  const tempCheckedPolicyNameList = policyTableListData.value?.filter(x => x.isChecked)?.map(x => x.title)
  barHousePropertyProjectSalesForecastData.value.yAxisName = housePropertyProjectSalesTrendForecastTabs.value.find(x => x.id === val)?.unit
  initHousePropertyProjecForecastData(cityObj.value.code, tempCheckedPolicyNameList) // 房地产项目预测
}

const changeForecastSimulationAnalysisTimeFiltrate = (val) => { // 模拟预测分析-月范围筛选
  console.log(val);
}

const changeHousePropertyForecastTimeFiltrate = (val) => { // 政策影响分析-房地产项目预测-月范围筛选
  const tempCheckedPolicyNameList = policyTableListData.value?.filter(x => x.isChecked)?.map(x => x.title)
  initHousePropertyProjecForecastData(cityObj.value.code, tempCheckedPolicyNameList) // 房地产项目预测
}

const monthPickerDisabledOptions = (time) => { // 月范围禁用校验
  let before = monthRangeDisabledOption.value[0]; // 格式为 '年-月'
  let beforeDate = new Date(before).getTime();
  let after = monthRangeDisabledOption.value[1]; // 格式为 '年-月'
  let afterDate = new Date(after).getTime();
  return time.getTime() < beforeDate || time.getTime() > afterDate;
}

const fullSc = (componentName, componentParams) => { // 放大chart图
  magnifyData.value.dialogTop = '25vh';
  magnifyData.value.dialogVisible = true;
  magnifyData.value.componentName = componentName;
  switch (componentName) {
    case 'lineSalesTrendForecast': // 房地产项目销售走势预测-line图
      magnifyData.value.props = {
        lineData: componentParams,
        class: 'h160 dialog-h160'
      };
      magnifyData.value.dialogWidth = '60%';
      break;
    case 'barFactorImportance': // 房地产项目销售因子重要程度-bar图
      magnifyData.value.props = {
        barData: componentParams,
        class: 'h160 dialog-h160'
      };
      magnifyData.value.dialogWidth = '60%';
      break;
    case 'linePolicyImpactForecast': // 政策影响分析-政策影响预测-line图
      magnifyData.value.props = {
        lineData: componentParams,
        class: 'h160 dialog-h160'
      };
      magnifyData.value.dialogWidth = '60%';
      break;
    case 'barHousePropertyProjectForecast': // 政策影响分析-房地产项目销售/价格预测-bar图
      magnifyData.value.props = {
        barData: componentParams,
        class: 'h170 dialog-h170'
      };
      magnifyData.value.dialogWidth = '60%';
      break;
  }
}

const goOtherPage = (item) => { // 顶部导航
  switch(item) {
    case '统计':
      router.push('/housePropertyAnalysis/statistics')
      break;
    case '分析':
      router.push('/housePropertyAnalysis/analysis')
      break;
    default:
      break;
  }
}

const initPage = (cityCode) => {
  initHousePropertyProjectSalesTrendAnalysis(cityCode) // 房地产项目销售走势预测-总的
  initRecommendTrafficList() // 项目推荐-交通下拉
  initRecommendSchoolList() // 项目推荐-学区下拉
  initRecommendLocationList() // 项目推荐-区位下拉
  initRecommendMoreList() // 项目推荐-更多下拉
  initForecastTrendAfterRegulationData(cityCode) // 预测模拟分析-预测调控后走势
  initPolicyListData(cityCode) // 政策列表
  initAreasList(cityCode) // 获取当前市区list
}

onMounted(() => {
  const date = new Date();
  currentYearMonthDay.value = `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`;
  currentYear.value = date.getFullYear();
  currentMonth.value = date.getMonth() + 1;
  const tempCurrentMonth = currentMonth.value + 1 < 10 ? `0${currentMonth.value + 1}` : `${currentMonth.value + 1}`
  if (currentMonth.value === 12) {
    forecastSimulationAnalysisTimeFiltrate.value = [`${currentYear.value + 1}-01`, `${currentYear.value + 2}-01`]
    housePropertyForecastTimeFiltrate.value = [`${currentYear.value + 1}-01`, `${currentYear.value + 2}-01`]
    monthRangeDisabledOption.value = [`${currentYear.value + 1}-01`, `${currentYear.value + 2}-01`]
  } else {
    forecastSimulationAnalysisTimeFiltrate.value = [`${currentYear.value}-${tempCurrentMonth}`, `${currentYear.value + 1}-${tempCurrentMonth}`]
    housePropertyForecastTimeFiltrate.value = [`${currentYear.value}-${tempCurrentMonth}`, `${currentYear.value + 1}-${tempCurrentMonth}`]
    monthRangeDisabledOption.value = [`${currentYear.value}-${tempCurrentMonth}`, `${currentYear.value + 1}-${tempCurrentMonth}`]
  }

  initPage(cityObj.value.code);
})
</script>

<style scoped lang="less">
.main-page {
  width: 100vw;
  height: 100vh;
  background-image: url("@/assets/img/housePropertyAnalysis/statistics/page-bg.png");
  background-size: 100% 100%;
  color: #fff;
  overflow: hidden;

  .page-title {
    width: 100vw;
    height: 85px;
    margin-bottom: 17px;
    background: url("@/assets/img/housePropertyAnalysis/statistics/header-bg@2x.png");
    background-size: 100% 100%;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 48px;
    letter-spacing: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;

    > span {
      font-size: 30px;
      margin-bottom: 20px;
      text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.6);
    }

    .top-tab {
      display: flex;

      .top-tab-left {
        position: absolute;
        top: 33px;
        left: 200px;
        display: flex;

        &-item {
          font-size: 20px;
          font-weight: bolder;
          padding: 7px 78px;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
        }

        &-item:first-child {
          background: url("@/assets/img/housePropertyAnalysis/statistics/top-tab-bg@2x.png");
          background-size: 100% 100%;
        }

        &-item:last-child {
          background: url("@/assets/img/housePropertyAnalysis/statistics/top-tab-bg@2x.png");
          background-size: 100% 100%;
          margin-left: -25px;
        }
      }

      .top-tab-right {
        position: absolute;
        top: 33px;
        right: 375px;
        display: flex;
        align-items: center;

        &-item {
          font-size: 20px;
          font-weight: bolder;
          padding: 7px 78px;
          display: flex;
          align-items: center;
          justify-content: center;
          background: url("@/assets/img/housePropertyAnalysis/forecast/chosen-top-tab-bg.png");
          background-size: 100% 100%;
          cursor: pointer;
        }

        span {
          position: absolute;
          font-size: 15px;
          right: -150px;
        }
      }
    }
  }

  .main-content {
    width: 100vw;
    padding: 0 20px;
    box-sizing: border-box;
    height: calc(100vh - 111px);

    .main-content-gird-title {
      width: 100%;
      display: flex;
      align-items: center;

      &-logo {
        width: 20px;
        height: 20px;
        margin-right: 6px;
      }

      p {
        font-size: 18px;
      }
    }

    .module-title-content-middle-line {
      width: 100% px;
      border: 1px solid;
      margin-top: 6px;
      border-image: linear-gradient(297deg, rgba(97, 228, 255, 0), rgba(50, 197, 255, 1), rgba(102, 255, 255, 1), rgba(50, 197, 255, 1), rgba(50, 197, 255, 0)) 1 1;
    }

    .house-property-project-sales-trend-forecast {
      background: url("@/assets/img/housePropertyAnalysis/forecast/module-bg-left-top-648-470.png");
      background-size: 100% 100%;
      padding: 16px 11px 20px;
      height: 350px;
      box-sizing: border-box;
      position: relative;

      .house-property-project-sales-trend {
        width: 100%;
      }
    }

    /deep/ .multiple-condition-list {
      .el-form-item__content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        .multiple-condition-list-item {
          width: 100%;
          display: flex;
          align-items: center;
          position: relative;

          .multiple-condition-list-item-delete {
            position: absolute;
            left: -20px;
          }

          .el-select {
            min-width: 80px;
            width: 80px;
            margin-right: 20px;

            .el-select__wrapper {
              background: #001A35;
              box-shadow: inset 0px 0px 8px 0px #3D7FFF;
              border-radius: 8px;
              border: 1px solid #03DBFF;

              .el-select__placeholder {
                color: white;
              }
            }
          }

          .el-slider {
            width: 40%;
            .el-slider__runway {
              background-color: #06598D;

              .el-slider__bar {
                background-color: #1FB7FF;
              }
            }

            .el-slider__button {
              width: 10px;
              height: 10px;
              border: 0;
            }
          }

          .slider-range-input {
            display: flex;
            align-items: center;
            margin-left: 20px;

            .el-input__wrapper {
              background: #001A35;
              box-shadow: inset 0px 0px 8px 0px #3D7FFF;
              border-radius: 8px;
              border: 1px solid #03DBFF;

              .el-input__inner {
                width: 55px;
                height: 15px;
                font-size: 12px;
                color: white;
              }
            }

            > span:last-child {
              margin-left: 5px;
              white-space: nowrap;
            }
          }
        }
      }
    }

    /deep/ .btns-form-item {
      .el-button {
        height: 24px;
        border-radius: 8px;
        border: 0;
      }

      .el-button:last-child {
        background: linear-gradient(135deg, rgba(94, 158, 234, 0.15) 0%, #2F62CD 50%, #3065D1 100%);
        box-shadow: inset 0px 0px 8px 0px #3D7FFF;
      }
    }

    .project-recommend {
      background: url("@/assets/img/housePropertyAnalysis/forecast/module-bg-left-bottom-648-464.png");
      background-size: 100% 100%;
      padding: 16px 11px 20px;
      height: 584px;
      box-sizing: border-box;
      position: relative;
      margin-top: 20px;

      .project-recommend-filtrate {
        height: 225px;
        overflow-y: auto;
        margin-top: 10px;

        /deep/ .el-form-item:nth-of-type(1) {
          .el-form-item__content {
            flex-wrap: nowrap;
            justify-content: space-between;

            .el-checkbox-group {
              .el-checkbox {
                color: white;

                .el-checkbox__input {
                  .el-checkbox__inner {
                    border: 1px solid #1FB7FF;
                    background-color: transparent;
                  }
                }

                .el-checkbox__input.is-checked {
                  .el-checkbox__inner {
                    background-color: #409EFF;
                  }
                }
              }
            }
          }
        }

        /deep/ .el-form-item {
          margin-bottom: 5px;

          .el-form-item__label {
            color: white;
            width: 90px;
          }

          .multiple-select {
            width: 66%;
            position: relative;

            .el-input__wrapper {
              background: #001A35;
              box-shadow: inset 0px 0px 8px 0px #3D7FFF;
              border-radius: 8px;
              border: 1px solid #03DBFF;
              height: 30px;
              min-height: 30px;
              width: 100%;

              .el-tag {
                height: 18px;
              }

              .el-input__suffix {
                .el-icon {
                  color: #00FBFF;
                }
              }

              .el-input__inner::placeholder {
                color: #cdd5db !important;
              }
            }
          }

          .multiple-select:after {
            content: '';
            position: absolute;
            top: 50%;
            right: -30px;
            width: 30px;
            height: 1px;
            background-color: #00f9fd;
          }

          .project-recommend-filtrate-traffic-cascader.multiple-select:after {
            width: 60px;
            right: -60px;
          }

          .project-recommend-filtrate-traffic-cascader.multiple-select:before {
            content: '';
            position: absolute;
            top: 15px;
            right: -30px;
            width: 1px;
            height: 112px;
            background-color: #00f9fd;
          }

          .accord-condition-type {
            display: flex;
            align-items: center;

            > span {
              white-space: nowrap;
              color: #00FBFF;
              font-size: 12px;
            }

            .el-select {
              width: 90px;
              margin: 0 5px;

              .el-select__wrapper {
                background: #001A35;
                box-shadow: inset 0px 0px 8px 0px #3D7FFF;
                border-radius: 8px;
                border: 1px solid #03DBFF;

                .el-select__placeholder {
                  color: white;
                }
              }
            }
          }
        }
      }

      .recommend-table-list-module {
        margin-top: 5px;
        /deep/ .el-table__inner-wrapper {
          height: 250px;
        }
        /deep/ .el-table__empty-text {
          height: 250px;
          line-height: 250px;
        }
      }
    }

    .middle-map {
      height: 400px;

      .map-address {
        position: absolute;
        top: 0px;
        left: 0px;
        letter-spacing: 1px;
        text-shadow: 0px 1px 2px #c1731c;
        font-size: 18px;
        color: #60f9f4;
        letter-spacing: 1.2px;
        margin-left: 27px;
      }

      .map-address::before {
        content: "";
        position: absolute;
        top: 2px;
        left: -27px;
        width: 20px;
        height: 20px;
        background: url("@/assets/img/personInfor/map-address.png");
        background-size: 100% 100%;
      }
    }

    .forecast-simulation-analysis {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 553px;
      box-sizing: border-box;
      background: url("@/assets/img/housePropertyAnalysis/statistics/module-bg-square.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      padding: 16px 21px;
      position: relative;
      .forecast-simulation-analysis-main-content {
        width: 100%;
        flex: 1;
        height: calc(100% - 32px);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .forecast-trend-aAfter-regulation {
          height: 235px;
          margin-top: 10px;
        }
      }
      /deep/ .el-form-item {
        margin-bottom: 5px;

        .el-form-item__label {
          color: white;
          width: 70px;
        }

        .multiple-select {
          width: 66%;
          position: relative;

          .el-select__wrapper {
            background: #001A35;
            box-shadow: inset 0px 0px 8px 0px #3D7FFF;
            border-radius: 8px;
            border: 1px solid #03DBFF;
            height: 24px;
            min-height: 24px;
            width: 100%;

            .el-tag {
              height: 18px;
            }

            .el-select__suffix {
              .el-icon {
                color: #00FBFF;
              }
            }

            .el-select__placeholder {
              color: white;
            }
          }
        }

        .el-input__wrapper {
          .el-input__inner {
            width: 30px !important;
          }
        }
      }
      /deep/ .forecast-simulation-analysis-date-picker {
        position: absolute;
        right: 15px;
        top: 15px;
        width: 170px;
        height: 20px;
      }
    }

    .policy-impact-analysis {
      background: url("@/assets/img/housePropertyAnalysis/forecast/module-bg-right-648-950.png");
      background-size: 100% 100%;
      padding: 16px 11px 20px;
      height: 950px;
      box-sizing: border-box;
      position: relative;

      .policy-list {
        width: 100%;
        /deep/ .el-table__inner-wrapper {
          height: 265px;
        }
        .pubilc-chart-title:nth-of-type(2) {
          margin-top: 20px;
        }
      }

      .policy-impact-analysis-forecast {
        position: relative;
        .pubilc-chart-title {
          line-height: 46px;
        }
        .policy-impact-analysis-house-property-forecast-tabs {
          position: relative;
          right: 0px;
          margin-top: 10px;
        }
        /deep/ .policy-impact-analysis-house-property-forecast-date-picker {
          position: absolute;
          right: 15px;
          top: 15px;
          width: 170px;
          height: 20px;
        }
      }
    }

    .public-tabs {
      position: absolute;
      right: 20px;
      top: 0;

      :deep(.el-tabs) {
        height: 46px;
        display: flex;
        align-items: center;

        .el-tabs__header {
          margin: 0;
        }

        .el-tabs__nav-wrap:after {
          height: 0;
        }

        .el-tabs__active-bar {
          height: 0;
        }

        .el-tabs__item {
          text-align: center;
          padding: 0 20px;
          font-size: 12px;
          height: 30px;
          box-shadow: inset 0px 0px 8px 0px #3D7FFF;
          border-radius: 8px;
          cursor: pointer;
          color: white;
        }

        .el-tabs__item:not(:last-child) {
          margin-right: 5px;
        }

        .el-tabs__item.is-active {
          background: linear-gradient(60deg, #0E5FFF 0%, #00FFFF 100%);
        }
      }
    }
  }
}

.pubilc-chart-title {
  font-size: 14px;
  font-weight: bold;
}

:deep(.el-date-editor) {
  opacity: 1;
}
/deep/ .el-dialog {
  background-color: rgb(6, 37, 69);

  .el-dialog__close {
    color: white;
    font-size: 25px;
  }
}

/deep/ .el-input__wrapper {
  background: #204485;
  .el-input__inner {
    color: white;
  }
  .el-range-input, .el-range-separator {
    color: white;
  }
}
/deep/ .el-select__wrapper {
  background: #204485;
  .el-select__selected-item {
    color: white;
  }
}
.custom-select-option{
  color:#ffffff;
  background: #1C5BCC;
}
.custom-select-option.is-selected{
  color: #00e0ff;
}
.custom-select-option:hover{
  background:#368CF2;
}
</style>
<style lang="less">
.forecast-simulation-analysis-date-picker-popper, .policy-impact-analysis-house-property-forecast-date-picker-popper {
  .el-month-table td.disabled .cell {
    background-color: #6969694f !important;
    color: #ffffff47 !important;
  }
}
.cascader-public-popper {
  .el-cascader-node {
    color: white;
  }
  .is-active.el-cascader-node {
    color: #00e0ff;
  }
  .el-cascader-node:hover, .el-cascader-node:focus {
    background-color: #368CF2;
  }
}
</style>